<template>
  <div>
    
    <div class="zq-header">
        <div class="box">
          <div class="z1-header-one">
            <input type="text" class="zq-input" placeholder="请输入手机号" v-model="phone">
          </div>
          <div class="z1-header-one">
            <input type="text" class="zq-input" placeholder="请输入用户名" v-model="name">
          </div>
          <div class="z1-header-one">
            <input type="text" class="zq-input" placeholder="请输入用户ID" v-model="id">
          </div>
          <button class="zq-btn" @click="getList">精准搜索</button>
          <button class="zq-btns" @click="qc">清空搜索</button>
        </div>
    </div>
    <div v-show="isinfo==true">
      <div class="zq-all">
        <div class="box">
          <div class="zq-all-one">
            <div class="zq-all-top"><span class="item">资产总额:￥{{info.zzc}}</span></div>
            <div class="zq-all-footer"><span>账户余额:</span>￥{{info.zhye}}</div>
          </div>
          <div class="zq-all-one">
            <div class="zq-all-top"></div>
            <div class="zq-all-footer"><span>冻结金额:</span>￥{{info.djje}}</div>
          </div>
          <div class="zq-all-one">
            <div class="zq-all-top"></div>
            <div class="zq-all-footer"><span>待还本金:</span>￥{{info.dhbj}}</div>
          </div>
          <div class="zq-all-one">
            <div class="zq-all-top"><span class="fonts">待还本金 = 待还展期本金 + 新增待还本金</span></div>
            <div class="zq-all-footer"><span>待还利息:</span>￥{{info.dhlx}}</div>
          </div>
        </div>
      </div>

      <div class="zq-all">
        <div class="box">
          <div class="zq-all-one">
            <div class="zq-all-top"><span>展期标的本金:￥{{info.zqbdbj}}</span></div>
            <div class="zq-all-footer"><span class="span">待还标的展期本金:￥{{info.dhzqbj}}</span></div>
          </div>
          <div class="zq-all-one">
            <div class="zq-all-top"></div>
            <div class="zq-all-footer"><span class="span">已还标的展期本金:￥{{info.yhzqbj}}</span></div>
          </div>
        </div>
      </div>

      <div class="zq-all">
        <div class="box">
          <div class="zq-all-one">
            <div class="zq-all-top"><span>新增展期本金:￥{{info.xzzqbj}}</span></div>
            <div class="zq-all-footer"><span class="span">待还标的展期本金:￥{{info.dhxzbj}}</span></div>
          </div>
          <div class="zq-all-one">
            <div class="zq-all-top"></div>
            <div class="zq-all-footer"><span class="span">已还标的展期本金:￥{{info.yhxzbj}}</span></div>
          </div>
        </div>
      </div>

      <div class="zq-alls">
        <div class="box">
          <div class="zq-all-one">
            <div class="zq-all-top"><span>展期后利息:</span>￥{{info.zqhlx}}</div>
            <div class="zq-all-footer"><span class="span">待还利息:￥{{info.dhlx}}</span></div>
          </div>
          <div class="zq-all-one">
            <div class="zq-all-top"></div>
            <div class="zq-all-footer"><span class="span">已还利息:￥{{info.yhlx}}</span></div>
          </div>
          <div class="zq-all-one">
            <div class="zq-all-tops"><span class="fonts">展期后利息  = 8.5前原利息（固定不变） + 9.6%利息（每天增加）</span></div>
            <div class="zq-all-footer"><span class="fonts">待还利息 = 展期后利息 + 已还利息金</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="zwxj" v-show="isinfo==false">{{fonts}}</div>
  </div>
</template>
<script>
export default {
  name: 'Zhanqi',
  data() {
    return {
      phone: '',
      name: '',
      id: '',
      info: {},
      isinfo: false,
      fonts: '暂无数据'
    }
  },
  mounted() {
    // this.getList();
  },
  methods: {
    qc:function() {
      this.phone = '';
      this.name = '';
      this.id = '';
      this.info = {};
      this.isinfo = false;
    },
    getList:function() {
      
      var that = this;
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if(that.phone==''&&that.name==''&&that.id=='') {
        that.$message.error('请输入查询信息');
        return false;
      } else if(that.phone!==''){
        if(!myreg.test(that.phone)){
          that.$message.error('请输入正确手机号');
          return false;
        } 
      }
      $.ajax({
        type: 'POST',
        url: that.$api + '/member/getZqUserInfo.do',
        data: {
          id: that.id,
          cU_ser: that.name,
          cMtel: that.phone
        },
        success:function(data) {
          // console.log(JSON.stringify(data));
          if(data.state==0) {
            that.info = data.content;
            if (that.inf0=={}) {
              that.isinfo = false;
              that.fonts = '暂无结果';
            } else {
              that.isinfo = true;
              that.$message({
                message: '查询成功',
                type: 'success'
              })
            }
            
          } else {
            that.$message.error(data.content);
          }
          
        },
        error:function(error) {
          wsloan.alert('数据获取失败(/member/getZqUserInfo.do)');
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.zq-header {
  width: 100%;
  height: 90px;
  border-bottom: 10px solid #f5f8fb;
  .box {
    width: 1600px;
  
    .z1-header-one {
      width: 300px;
      height: 80px;
      float: left;
      .zq-input {
        outline: none;
        border: none;
        background: none;
        width: 250px;
        height: 40px;
        border: 1px solid #eaeaea;
        margin-top: 20px;
        padding-left: 10px;
        margin-left: 25px;
        border-radius: 5px;
      }
    }
    .zq-btn {
      width: 150px;
      height: 40px;
      outline: none;
      background: none;
      border: none;
      background: #20a0ff;
      color: #ffffff;
      border-radius: 5px;
      margin-top: 20px;
      margin-left: 50px;
      cursor: pointer;
    }
    .zq-btns {
      width: 80px;
      height: 40px;
      outline: none;
      background: none;
      border: none;
      background: #e2233e;
      color: #ffffff;
      border-radius: 5px;
      margin-top: 20px;
      margin-left: 50px;
      cursor: pointer;
    }
  }
}
.zq-all {
  width: 100%;
  height: 180px;
  border-bottom: 10px solid #f5f8fb;
  .box {
    width: 1600px;
    .zq-all-one {
      width: 360px;
      height: 170px;
      float: left;
      /* border: 1px solid red; */
      .zq-all-top {
        width: 350px;
        height: 60px;
        line-height: 60px;
        text-align: left;
        margin-top: 45px;
        padding-left: 20px;
        font-size: 14px;
        color: #797979;
        span {
          font-size: 18px;
          color: #333333;
          /* font-weight: 600; */
        }
        .span {
          color: #ff9952
        }
        .item {
          font-size: 18px;
          color: #333333;
          font-weight: 600;
        }
      }
      .zq-all-footer {
        width: 350px;
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 20px;
        font-size: 18px;
        color: #797979;
        span {
          font-size: 18px;
          color: #333333;
          /* font-weight: 600; */
        }
        .span {
          color: #ff9952
        }
      }
    }
  }
  
}

.zq-alls {
  width: 100%;
  height: 180px;
  .box {
    width: 1600px;
    .zq-all-one {
      width: 360px;
      height: 170px;
      float: left;
      /* border: 1px solid red; */
      .zq-all-top {
        width: 350px;
        height: 60px;
        line-height: 60px;
        text-align: left;
        margin-top: 45px;
        padding-left: 20px;
        font-size: 18px;
        color: #797979;
        span {
          font-size: 18px;
          color: #333333;
          /* font-weight: 600; */
        }
        .span {
          color: #ff9952
        }
      }
      .zq-all-tops {
        width: 600px;
        height: 60px;
        line-height: 60px;
        text-align: left;
        margin-top: 45px;
        padding-left: 20px;
        font-size: 14px;
        color: #797979;
        span {
          font-size: 18px;
          color: #333333;
          /* font-weight: 600; */
        }
        .span {
          color: #ff9952
        }
      }
      .zq-all-footer {
        width: 350px;
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 20px;
        font-size: 14px;
        color: #797979;
        span {
          font-size: 18px;
          color: #333333;
          /* font-weight: 600; */
        }
        .span {
          color: #ff9952
        }
      }
    }
  }
  
}
span.fonts {
  font-size: 14px;
}
.zwxj {
  text-align: center;
  margin-top: 250px;
  font-size: 36px;
  color: #d9d9d9;
  font-weight: 600;
}
</style>